<template>
	<el-row class="warp">
		<el-col span="8"  class="warp-main">
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="账号">
					<el-input v-model="form.account" disabled></el-input>
				</el-form-item>
				<el-form-item prop="nickname" label="昵称">
					<el-input v-model="form.nickname"></el-input>
				</el-form-item>
				<el-form-item prop="name" label="姓名">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item prop="email" label="邮箱">
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSaveProfile">修改并保存</el-button>
				</el-form-item>
			</el-form>
		</el-col>
	</el-row>
</template>

<script>
	import { userInfo } from '../../api/api.js';
	export default {
		data() {
			return {
				loading: false,
				form: {
					account: '',
					nickname: '',
					name: '',
					email: ''
				},
				rules: {
					nickname: [
						{required: true, message: '请输入昵称', trigger: 'blur'}
					],
					email: [
						{required: true, message: '请输入邮箱', trigger: 'blur'},
						{type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
					]
				},
			}
		},
		computed:{
		},		
		methods: {
		//获取个人信息
		getUserInfos() {
			userInfo().then((res) => {
				if(res.code === 200){
					this.form = res.data;
				}
			});
		},
		},
		mounted() {
			this.getUserInfos();
		}
	}
</script>
